<%--
  Created by IntelliJ IDEA.
  User: 15458
  Date: 2025/4/17
  Time: 16:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>产品管理系统</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义表格样式 -->
    <style>
        .table-hover tbody tr:hover {
            background-color: rgba(13,110,253,0.1);
        }
        .action-column {
            width: 180px;
        }
    </style>
</head>
<body class="bg-light">
<div class="container mt-5">
    <!-- 操作提示消息 -->
    <c:if test="${not empty requestScope.successMessage}">
        <div class="alert alert-success alert-dismissible fade show" role="alert">
                ${requestScope.successMessage}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    </c:if>
    <c:if test="${not empty requestScope.errorMessage}">
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                ${requestScope.errorMessage}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    </c:if>

    <!-- 工具栏 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="text-primary">商品列表</h2>
        <a href="${pageContext.request.contextPath}/product?action=create"
           class="btn btn-success">
            <i class="bi bi-plus-lg"></i> 新建商品
        </a>
    </div>

    <!-- 商品表格 -->
    <div class="card shadow-sm">
        <div class="card-body p-0">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">商品名称</th>
                    <th scope="col">价格</th>
                    <th scope="col">库存</th>
                    <th scope="col">上架状态</th>
                    <th scope="col" class="action-column">操作</th>
                </tr>
                </thead>
                <tbody>
                <c:choose>
                    <c:when test="${empty requestScope.products}">
                        <tr>
                            <td colspan="6" class="text-center text-muted py-4">
                                <i class="bi bi-info-circle fs-4"></i>
                                <div class="mt-2">暂无商品数据</div>
                            </td>
                        </tr>
                    </c:when>
                    <c:otherwise>
                        <c:forEach items="${requestScope.products}" var="product" varStatus="status">
                            <tr>
                                <td>${status.index + 1}</td>
                                <td>${product.name}</td>
                                <td class="text-nowrap">
                                    <span class="text-danger">¥</span>
                                    <fmt:formatNumber value="${product.price}" pattern="#,##0.00"/>
                                </td>
                                <td>${product.stock}</td>
                                <td>
                                    <c:choose>
                                        <c:when test="${product.status eq 'ON_SALE'}">
                                            <span class="badge bg-success">在售</span>
                                        </c:when>
                                        <c:otherwise>
                                            <span class="badge bg-secondary">下架</span>
                                        </c:otherwise>
                                    </c:choose>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <a href="${pageContext.request.contextPath}/product?action=edit&id=${product.id}"
                                           class="btn btn-outline-primary">
                                            <i class="bi bi-pencil-square"></i> 编辑
                                        </a>
                                        <button type="button"
                                                class="btn btn-outline-danger"
                                                data-bs-toggle="modal"
                                                data-bs-target="#deleteModal"
                                                data-product-id="${product.id}"
                                                data-product-name="${product.name}">
                                            <i class="bi bi-trash"></i> 删除
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                    </c:otherwise>
                </c:choose>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认删除</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>确定要删除商品 <span id="productName" class="fw-bold text-danger"></span> 吗？</p>
                <p class="text-muted small">此操作不可恢复，请谨慎操作！</p>
            </div>
            <div class="modal-footer">
                <form id="deleteForm" method="post">
                    <input type="hidden" name="action" value="delete">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="submit" class="btn btn-danger">确认删除</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap 5 JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<!-- 删除模态框交互脚本 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const deleteModal = document.getElementById('deleteModal')
        deleteModal.addEventListener('show.bs.modal', event => {
            const button = event.relatedTarget
            const productId = button.getAttribute('data-product-id')
            const productName = button.getAttribute('data-product-name')

            document.getElementById('productName').textContent = productName
            const form = document.getElementById('deleteForm')
            form.action = `${pageContext.request.contextPath}/product?id=${productId}`
        })
    })
</script>
</body>
</html>
